<template>
    <div class="supplement-list-background">
        <van-row type="flex" class="supplement-list-title">
            <van-col span="24">{{list.length>0?'以下是您的':'暂无'}}补缴列表</van-col>
        </van-row>
        <!-- finished  是否已加载完成，加载完成后不再触发load事件 Boolean false -->
        <van-list v-model="loading" :finished="finished" @load="onLoad" loading-text='拼命加载中...' style="background:#f7f6f6;padding-bottom: 45px">
            <van-checkbox-group v-model="vehNos">
                <van-row v-for="item in list" :key="item.vehNo" style='margin:10px 7%;width: 86%;'>
                    <van-col span="2" style="background:#f7f6f6;">
                        <van-checkbox shape='square' style='margin-top: 50px' :key="item.vehNo" :name="item.vehNo"></van-checkbox>
                    </van-col>

                    <van-col span="22">
                        <van-cell>
                            <van-row style='margin-bottom: 10px'>
                                <van-col span="12" v-carplate-text="[item.vehNo,item.platColor]"></van-col>
                            </van-row>
                             <hr style='background-color:#f5f5f5;'>
                            <van-row style='margin-bottom: 10px'>
                                <van-col span="16">七里河路西停车站</van-col>
                                <van-col span="8" class='supplement-list-date1'>06小时15分钟</van-col>
                                <van-col span="18">
                                    <van-col span="24" class='supplement-list-date2'>
                                        入场时间：{{'2017-07-31'|dateFormat('YYYY-MM-DD hh:mm:ss')}}</van-col>
                                    <van-col span="24" class='supplement-list-date2'>
                                        出场时间：{{'2017-07-31'|dateFormat('YYYY-MM-DD hh:mm:ss')}}</van-col>
                                </van-col>
                                <van-col span="6" class='supplement-list-money'>
                                    {{item.bill| formatMoneyPenny('￥',"2")}}
                                </van-col>
                            </van-row>
                            <hr style='background-color:#f5f5f5;'>
                            <van-row>
                                <van-col span="24" offset=0 class='supplement-list-pic' @click.native="showPic">
                                    查看图片
                                </van-col>
                            </van-row>
                        </van-cell>
                    </van-col>
                </van-row>
            </van-checkbox-group>
        </van-list>
        <van-tabbar>
            <van-tabbar-item style='font-size: 18px'>
                <van-checkbox v-model='selectAll' shape='square' @click.native='checkedAll()'>全选</van-checkbox>
            </van-tabbar-item>
            <van-tabbar-item style='font-size: 18px'>合计 <span style="color:#FF8D00">{{bills| formatMoneyPenny('￥',"2")}}</span> </van-tabbar-item>
            <van-tabbar-item style="color:#ffffff;font-size: 18px;background: #4797fd" @click.native='payment()'>支付</van-tabbar-item>
        </van-tabbar>
        <!-- <van-popup v-model="show">
  <img width="100%" src='./bg4.jpg'>
</van-popup> -->
    </div>
</template>
<script>
import { ImagePreview } from 'vant';
import { Toast } from 'vant';
export default {
    name: 'supplementList',
    data() {
        return {
            list: [],
            vehNos: [],
            selectAll: false,
            loading: false,
            finished: false,
            show: true,
            bills:0
        };
    },
    created() {
        this.list = [{
                'vehNo': '鲁A 12345',
                'platColor': '1',
                'bill':123
            },
            {
                'vehNo': '鲁B 55555',
                'platColor': '2',
                'bill':8
            }, {
                'vehNo': '鲁C 66666',
                'platColor': '3',
                'bill':66
            }, {
                'vehNo': '鲁D 88888',
                'platColor': '4',
                'bill':9999
            }, {
                'vehNo': '鲁E 90909',
                'platColor': '5',
                'bill':888
            }
        ];
    },
    methods: {
        onLoad() {

          this.loading=false;
          this.finished=true; 
        },
        showPic() {
            ImagePreview(['static/img/bg4.601b89b.jpg'], 1);
        },
        checkedAll() {
            if (this.vehNos.length === this.list.length) {
                this.vehNos = [];
                this.selectAll = false;
            } else {
                this.vehNos = [];
                for (let i of this.list) {
                    this.vehNos.push(i['vehNo']);
                }
                this.selectAll = true;
            }
        },
        payment() {
          if(this.vehNos.length==0){
              Toast.fail('请选择补缴项目');
          }else{
              Toast.success('支付成功');
          }
        }
    },
        watch:{
            vehNos(newVal,oldVal){
                this.bills=0;
                let strVehNo=newVal.join(",")
                for(let i in this.list){
                    if(strVehNo.indexOf(this.list[i].vehNo)>-1){
                        this.bills+=this.list[i].bill;
                    }                 
                }
            }
        }
};
</script>
<style>
.supplement-list-background {
    position: relative;
    left: 0px;
    top: 0px;
    height: 100vh;
    background: #f7f6f6;
}

.supplement-list-title {
    color: #3DA6FF;
    text-align: center;
    padding: 20px;
}

.supplement-list-date1 {
    text-align: right;
    color: #4797FD;
}

.supplement-list-date2 {
    color: #797979;
}

.supplement-list-money {
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    color: #FF8D00;
}

.supplement-list-pic {
    text-align: center;
    cursor: pointer;
}
</style>